<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<%@ include file="/WEB-INF/pages/include/globa.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>花 · 生</title>
	<link rel="shortcut icon" href="resources/ico/favicon.ico" >
	<link rel="stylesheet" href="${SERVER_PATH}/resources/css/common.css" />
	<link rel="stylesheet" href="${SERVER_PATH}/resources/css/about-us.css" />
	<link rel="stylesheet" href="${SERVER_PATH}/resources/css/header.css" />
	<link rel="stylesheet" href="${SERVER_PATH}/resources/js/amazeui/css/amazeui.min.css">
</head>
<body>
	<div class="content" >
		<%@include file="/WEB-INF/pages/include/header.jsp" %>
		
		<section class="main" id="skrollr-content">
			<h1 data-20="top:120px;opacity:1;" data-60="top:140px;opacity:0;">花 · 生值
				<p style="font-size:14px;">（费用预估）</p>
			</h1>
			<div class="body-content-panel" >
				<div class="content-panel">
				<form class="am-form" id="feeForm">
					  <fieldset>
					    <div class="am-form-group">
					     	<h4 class="content-p-title">套餐选择：</h4>
							<ul class="am-avg-sm-3 am-thumbnails">
								<li class="img-item">
									<img class="am-circle am-img-thumbnail" id="img11" src="http://on01whf2s.bkt.clouddn.com/peanut/WechatIMG14.jpeg?imageMogr2/quality/10!/interlace/1">
									<label class="am-radio-inline">
								        <input type="radio" name="type" value="1"><span>高端定制</span>
								  	</label>
								</li>
								<li class="img-item">
									<img class="am-circle am-img-thumbnail" id="img11" src="http://on01whf2s.bkt.clouddn.com/peanut/WechatIMG15.jpeg?imageMogr2/quality/10!/interlace/1">
									<label class="am-radio-inline">
								        <input type="radio" name="type" value="2"><span>独家定制</span>
								  	</label>
								</li>
								<li class="img-item">
									<img class="am-circle am-img-thumbnail" id="img13" src="http://on01whf2s.bkt.clouddn.com/peanut/WechatIMG16.jpeg?imageMogr2/quality/10!/interlace/1">
									<label class="am-radio-inline">
								        <input type="radio" name="type" value="3"><span>温馨定制</span>
								  	</label>
								</li>
							</ul>
					    </div>
					    <div class="am-form-group">
					      <h4 class="content-p-title">待产周期：</h4>
					      <label class="am-radio-inline">
					        <input type="radio"  value="1" name="deliveryCycle">1个月
					      </label>
					      <label class="am-radio-inline">
					        <input type="radio" value="2" name="deliveryCycle">2个月
					      </label>
					      <label class="am-radio-inline">
					        <input type="radio" value="3" name="deliveryCycle">3个月
					      </label>
					    </div>
					    <div class="am-form-group">
					      	<h4 class="content-p-title">月子周期：</h4>
						      <label class="am-radio-inline">
						        <input type="radio"  value="1" name="confinementCycle">1个月
						      </label>
						      <label class="am-radio-inline">
						        <input type="radio" value="2" name="confinementCycle">2个月
						      </label>
						      <label class="am-radio-inline">
						        <input type="radio" value="3" name="confinementCycle">3个月
						      </label>
					    </div>
					
					    <div class="am-form-group">
					     	 <h4 class="content-p-title">增值服务：</h4>
							 <div class="am-avg-sm-3 am-avg-md-6">
						      <label class="am-radio-inline">
						        <input type="radio"  value="1" name="valueAdd">一对一月嫂服务
						      </label>
						      <label class="am-radio-inline">
						        <input type="radio" value="2" name="valueAdd">一对一保姆照顾
						      </label>
						       <label class="am-radio-inline">
						        <input type="radio"  value="3" value="" name="valueAdd">行前咨询包
						      </label>
						      <label class="am-radio-inline">
						        <input type="radio" value="4" name="valueAdd">第三方专业签证
						      </label>
						      <label class="am-radio-inline">
						        <input type="radio" value="5" name="valueAdd">其他
						      </label>
						    </div>
					    </div>
					
					    <div class="am-form-group">
					      <h4 class="content-p-title">
						   	 手机号： <input type="text" style="display:inline-block;width:70%" name="phone" placeholder="输入手机号">
							</h4>
					    </div>
  					</fieldset>
					</form>
					<div style="text-align: center;">
						<button class="am-btn am-btn-primary submit-btn" onclick="submitForm()">提交申请</button>
					</div>
				</div>
				<div class="flexbox"  data-100-end="opacity:0;" data-end="opacity:1;" >
					<div class="foot-info">
						<p>联系我们：</p>
						<p>微信：花生USAbaby</p>
						<p>邮箱：xiaosongshuKZD@163.com</p>
					</div>
					<div class="foot-logo">
						<a href="javascript:void(0);" onclick="BackTop('gotop')" id="gotop"  alt="花生"><img src="${SERVER_PATH}/resources/img/logo-t.png" /></a>
					</div>
				</div>
			</div>
		</section>
		
		<script type="text/javascript" src="${SERVER_PATH}/resources/js/amazeui/js/amazeui.min.js"></script>
		<script type="text/javascript" src="${SERVER_PATH}/resources/js/skrollr.min.js"></script>
		<script type="text/javascript">
		var s = skrollr.init({
			forceHeight: true,
			smoothScrolling : true,
			smoothScrollingDuration:200,
			skrollrBody : 'skrollr-content'
		});
		function BackTop(btnId) {
			$('body,html').animate({scrollTop:0},300);
		}
		
		function submitForm(){
			var host = window.location.host;
			console.log($('#feeForm').serialize()+"&host="+host);
			 $.ajax({  
	             type : "POST",  //提交方式  
	             url : SERVER_PATH + "/fee/v1/commit",//路径
	             data : $('#feeForm').serialize()+"&host="+host,
	             success : function(result) {//返回数据根据结果进行相应的处理  
	             	if(result.rescode == 100) {
	             		alert("提交成功，请耐心等待咨询师与您联系");
	             		$('#feeForm')[0].reset();
	             	} else {
	             		alert(result.msg);
	             	}
	             }  
	         });  
		}
		</script>
	</div>

</body>
</html>